<template>
  <div class="content-box" :style="boxStyle">
    <slot>
      <el-card>
        <div v-if="showHeader" slot="header">
          <el-row type="flex" :justify="cardHeaderJustify" align="middle">
            <slot name="card-header"></slot>
          </el-row>
        </div>
        <div class="card-body-wrap">
          <slot name="card-body" />
        </div>
      </el-card>
    </slot>
  </div>
</template>
<script>
export default {
  props: {
    showHeader: {
      type: Boolean,
      default: true
    },
    cardHeaderJustify: {
      type: String,
      default: 'space-between'
    },
    boxWidth: {
      type: Number,
      default: null
    }
  },
  computed: {
    boxStyle () {
      const width = this.boxWidth ? `${this.boxWidth}px` : '100%;'
      return `width: ${width};`;
    }
  }
}
</script>
<style lang="less" scoped>
.content-box {
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 10px;
  .box-header-wrap {
    height: 40px;
    display: flex;
    align-items: center;
  }
  .card-body-wrap {
    width: 100%;
    height: 595px;
    overflow: hidden;
    overflow-x: auto;
    overflow-y: hidden;
  }
}
/deep/ .el-card__header {
  padding: 10px;
}
/deep/ .el-card__body {
  padding: 10px;
}
</style>
